<template>
    <n-select v-bind="$attrs" :render-label="renderLabel"></n-select>
</template>
<script setup>
import { h } from "vue";
const renderLabel = (option) => {
    return h("div", { class: "select-label-content" }, [
        h("div", { class: "select-label-content-img" }, [
            h("img", { src: option.img || option.value }),
        ]),
        h("span", option.label),
    ]);
};
</script>
<style lang="less" scoped>
:deep(.select-label-content) {
    display: flex;
    align-items: center;
    &-img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}
</style>
